<template>
  <onez-view class="dialogBox" v-show="ready" :style="{ transform: 'scale(' + zoom + ',' + zoom + ')' }">
    <onez-background
      :style="{ left: marginLeft + 'px', top: marginTop + 'px', width: info.width + 'px', height: info.height + 'px' }"
      v-if="dialog"
      @ready="onBgReady"
      class="dialog"
      :resid="resId"
	  padding="0,0,0,0"
      :size="size"
    >
      <template v-slot="bg">
        <onez-view class="titleBox" v-if="title_">
          <!-- <onez-node class="title" resid="dlgHeader">{{ title_ }}</onez-node> -->
        </onez-view>
        <!-- <onez-button class="close" @click="quit" resid="dlgQuit"></onez-button> -->

        <onez-view
          class="child"
          :style="{ marginLeft: bg.paddings.left + 'px', marginTop: bg.paddings.top + 'px', width: bg.paddings.width + 'px', height: bg.paddings.height + 'px' }"
        >
          <onez-view class="body">
            <onez-view class="main" :style="info.noscroll ? 'overflow:hidden' : ''">
              <onez-frame :info="frame" @event="click"></onez-frame>
              <slot></slot>
            </onez-view>
          </onez-view>
        </onez-view>
      </template>
    </onez-background>
  </onez-view>
</template>

<script>
			import onezView from '../onez-view/onez-view.vue'
			import onezFrame from '../onez-frame/onez-frame.vue'
			import onezBackground from '../onez-background/onez-background.vue'
export default {
  name: 'onez-dialog',
  components: {
  	onezView, onezBackground, onezFrame
  },
  data() {
    return {
      show: false,
      ready: false,
      dialog: false,
      resId: null,
      result: null,
      frame: null,
      btns: [],
      info: {},
      size: '480,320',
      title_: null,
      zoom: 1,
      body_width: 0,
      body_height: 0,
      marginLeft: 0,
      marginTop: 0
    };
  },
  props: {
    resid: {
      type: String,
      default: 'dlgBody'
    },
    title: {
      type: String,
      default: null
    },
    width: {
      type: Number,
      default: 320
    },
    height: {
      type: Number,
      default: 320
    }
  },
  mounted() {},
  methods: {
    quit() {
      this.result = { type: 'quit' };
      this.close();
    },
    close() {
      if (this.info.noani) {
        this.show = false;
        this.ready = false;
        this.dialog = false;
        return;
      }
      this.zoom = 1;
      this.$game.tween(this, 0.2, { zoom: 0, ease: 'linear.out' });
      setTimeout(() => {
        this.show = false;
        this.ready = false;
        this.dialog = false;
      }, 200);
    },
    open() {
      if (this.info.noani) {
        this.show = true;
        this.zoom = 1;
        return;
      }
      this.show = true;
      this.zoom = 0;
      this.$game.tween(this, 0.2, { zoom: 1, ease: 'linear.in' });
    },
    async click(e) {
      this.result = e;
      if (this.result.token == 'submit') {
        let form = e.form || this.info.form;
        console.log('~~~~~~~~~~~~~~~', form);
        if (form) {
          var values = {};
          for (var i = 0; i < form.length; i++) {
            var item = form[i];
            if (item.key) {
              values[item.key] = item.value;
              if (item.notempty && !values[item.key]) {
                this.$game.alert(item.notempty);
                return;
              }
            }
          }
          this.result.values = values;
        }
        if (this.info.callback) {
          this.$game.loading(true);
          this.result.callback = await this.info.callback(this.result);

          this.$game.loading(false);
          if (!this.result.callback) {
            return;
          }
        }
      }
      this.close();
    },
    waitClose() {
      return new Promise((resolve, reject) => {
        this.timer = setInterval(() => {
          if (!this.show) {
            clearInterval(this.timer);
            resolve();
          }
        }, 100);
      });
    },
    async onBgReady(r) {
		console.log('dialog ready ==> ', r)
      this.ready = true;
    },
    waitReady() {
      return new Promise((resolve, reject) => {
        this.timer_ready = setInterval(() => {
          if (this.ready) {
            clearInterval(this.timer_ready);
            resolve();
          }
        }, 100);
      });
    },
    async update(data) {
      this.$game.loading(true);
      this.ready = false;
      var btns = data.btns || [];
      this.resId = data.resid || this.resid;
      if (data.type == 'message') {
        data.noscroll = true;
        data.noani = true;
        data.width = data.width || 360;
        data.height = data.height || 200;
        if (data.method == 'confirm') {
          btns.push({ name: '确定', type: 'primary', token: 'submit' });
          btns.push({ name: '取消', type: 'danger', token: 'cancel' });
        } else {
          btns.push({ name: '确定', type: 'primary', token: 'submit' });
        }
      } else if (data.type == 'dialog') {
        data.width = data.width || 640;
        data.height = data.height || 560;
        btns.push({ name: '确定', type: 'primary', token: 'submit' });
        btns.push({ name: '取消', type: 'danger', token: 'cancel' });
      }
      if (data.nobtn) {
        btns = [];
      }
      var title = data.title || this.title;
      var width = data.width || this.width;
      var height = data.height || this.height;

      if (!isNaN(this.$game.width)) {
        width = Math.min(width, this.$game.width);
      }
      if (!isNaN(this.$game.height)) {
        height = Math.min(height, this.$game.height);
      }
      data.width = width;
      data.height = height;
      this.marginLeft = -width / 2;
      this.marginTop = -height / 2;
      this.size = width + ',' + height;
      this.title_ = title;
      this.info = data;
      this.frame = data.frame || {
        box: {
          form: data.form,
          message: data.message,
          $data: data.$data,
          $page: data.$page,
          record: data.record,
          goto: data.goto,
          nobtn: data.nobtn,
          btns: btns
        },
		frame_width: data.width,
		frame_height: data.height
      };
      this.dialog = true;
	  console.log('dialog frame =>', this.frame, data)
      await this.waitReady();
      this.$game.loading(false);
      this.open();
      await this.waitClose();
      return this.result;
    }
  }
};
</script>

<style scoped>
.dialogBox {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 999;
}
.dialog {
  position: absolute;
  pointer-events: all !important;
  color: #fff;
  display: block;
}
.titleBox {
  position: absolute;
  left: 50%;
  top: 15px;
  z-index: 1;
  display: block;
}
.title {
  zoom: 0.6;
  position: absolute;
  left: -169px !important;
  top: -33px !important;
  text-align: center;
  line-height: 66px;
  font-size: 28px;
  font-weight: 900;
  -webkit-text-stroke: 1px #2bccda;
  display: block;
}
.close {
  position: absolute;
  right: 29px;
  top: -9px;
  z-index: 9;
  zoom: 0.7;
  opacity: 1;
}
.body {
  position: absolute;
  z-index: 2;
  display: flex;
  flex-direction: column;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}
.main {
  flex: 1;
  overflow: auto;
  display: block;
}
.child {
  position: relative;
  display: block;
}
</style>
